import React, {useRef} from 'react';
import {useNavigate} from "react-router-dom";
import {SearchBarContainer} from "./SearchBar.css";
function SearchBar(props) {
    const navigate = useNavigate()
    const keyWordRef = useRef();
    return (
        <SearchBarContainer>
            <input className={"searchInput"} ref={keyWordRef} onKeyUp={enterToSearch} placeholder={"搜索音乐"}/>
            <button className={"iconfont nisky-sousuo searchButton"} onClick={()=>{search()}}/>
        </SearchBarContainer>
    );
    function enterToSearch(e){
        if(e?.key==="Enter"){
            search()
        }
    }
    function search(){
        navigate(`/search/songs?keyword=${keyWordRef.current.value}`,{replace:true})
        keyWordRef.current.value = ""
    }
}

export default SearchBar;